<template>
	<div>
		<div class="flex items-center flex-wrap">
			<moves-card :records="tableData.records" />
		</div>

		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>
	</div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { reactive, watchEffect } from "vue";
import { getMovePage } from "@/api/move";
import MovesCard from "@/components/movesCard/movesCard.vue";

const route = useRoute();
const router = useRouter();
const tableData = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
	tagId: "",
});

const loadData = async () => {
	const result = await getMovePage({
		page: tableData.page,
		size: tableData.size,
		tag: tableData.tagId,
	});
	if (result.success) {
		tableData.records = result.data.list;
		tableData.page = result.data.pageNum;
		tableData.pages = result.data.pages;
	}
};

watchEffect(() => {
	if (route.query.tag === "hot") {
		return;
	}
	tableData.tagId = route.query.tag;
	loadData();
});
</script>
<style scoped></style>
